<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>人人点评</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="./css/element.css">
  <link href="./css/main.css" rel="stylesheet">
  <link href="./css/blog-edit.css" rel="stylesheet">
  <style type="text/css">
  </style>
</head>

<body>
  <div id="app">
    <div class="header">
      <div class="header-cancel-btn" @click="goBack">取消</div>
      <div class="header-title">&nbsp;&nbsp;发笔记<i class="el-icon-info"></i></div>
      <div class="header-commit">
        <div class="header-commit-btn" @click="submitBlog">发布</div>
      </div>
    </div>
    <div class="upload-box">
      <input type="file" @change="fileSelected" name="file" ref="fileInput" style="display: none">
      <div class="upload-btn" @click="openFileDialog">
        <i class="el-icon-camera"></i>
        <div style="font-size: 12px;line-height: 12px">上传照片</div>
      </div>
      <div class="pic-list">
        <div class="pic-box" v-for="(f,i) in fileList" :key="i">
          <img :src="f" alt="">
          <i class="el-icon-close" @click="deletePic(i)"></i>
        </div>
      </div>
    </div>
    <div class="blog-title">
      <input v-model="params.title" type="text" placeholder="填写标题更容易上首页哦~">
    </div>
    <div class="blog-content">
      <textarea v-model="params.content" placeholder="最近打卡了什么地方，有什么新奇体验呢？"></textarea>
    </div>
    <div class="divider"></div>
    <div class="blog-shop" @click="showDialog=true">
      <div class="shop-left">关联商户</div>
      <div v-if="selectedShop.name">{{selectedShop.name}}</div>
      <div v-else>去选择&nbsp;<i class="el-icon-arrow-right"></i></div>
    </div>
    <div class="mask" v-show="showDialog" @click="showDialog=false"></div>

    <transition name="el-zoom-in-bottom">
      <div class="shop-dialog" v-show="showDialog">
        <div class="blog-shop">
          <div class="shop-left">关联商户</div>
        </div>
        <div class="search-bar">
          <div class="city-select">{{address}} <i class="el-icon-arrow-down"></i></div>
          <div class="search-input">
            <i class="el-icon-search" @click="queryShops('query')"></i>
            <input v-model="shopName" type="text" placeholder="搜索商户名称">
          </div>
        </div>
        <div class="shop-list" @scroll="onScroll">
          <div v-for="s in shops" class="shop-item" @click="selectShop(s)">
            <div class="shop-name">{{s.name}}</div>
            <div>{{s.area}}</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
  <script src="./js/vue.js"></script>
  <script src="./js/axios.min.js"></script>
  <!-- 引入组件库 -->
  <script src="./js/element.js"></script>
  <script src="./js/common.js"></script>
  <script src="./js/footer.js"></script>
  <script>

    const app = new Vue({
      el: "#app",
      data() {
        return {
          util,
          fileList: [], // 文件列表
          params: {},
          showDialog: false, //
          shops: [], // 商户信息
          current : 1, // 当前页码
          shopName: "", //商户名称
          selectedShop: {}, // 选中的商户
          address : ''
        }
      },
      created() {
        this.checkLogin();
        this.queryShops();
        this.address = JSON.parse(localStorage.getItem("currentAddress")).city
      },
      mounted() {
        // this.address = JSON.parse(localStorage.getItem("currentAddress")).city
      },
      methods: {
        queryShops(str) {
          if ("query" === str) {
            this.shops = []
            this.current = 1
            axios.get("/shop/of/name?name=" + this.shopName+"&current="+this.current)
            .then(({ data }) => {
              this.shops = this.shops.concat(data);
            })
            .catch(this.$message.error)
          }else{
            axios.get("/shop/of/name?name=" + this.shopName+"&current="+this.current)
            .then(({ data }) => {
              this.shops = this.shops.concat(data);
            })
            .catch(this.$message.error)
          }
        },
        selectShop(s) {
          this.selectedShop = s;
          this.showDialog = false;
        },
        submitBlog() {
          let { ...data } = this.params;
          data.images = this.fileList.join(",");
          data.shopId = this.selectedShop.id;
          axios.post("/blog", data)
            .then(resp => location.href = "/info.html")
            .catch(this.$message.error)
        },
        openFileDialog() {
          this.$refs.fileInput.click();
        },
        fileSelected() {
          let file = this.$refs.fileInput.files[0];
          let formData = new FormData();
          formData.append("file", file);
          const config = {
            headers: { "Content-Type": "multipart/form-data;boundary=" + new Date().getTime() }
          };
          axios
            .post("/upload/blog", formData, config)
            .then(({ data }) => this.fileList.push('/imgs' + data))
            .catch(this.$message.error);
        },
        deletePic(i) {
          axios.get("/upload/blog/delete?name=" + this.fileList[i])
            .then(() => this.fileList.splice(i, 1))
            .catch(this.$message.error)
        },
        checkLogin() {
          // 获取token
          let token = sessionStorage.getItem("token");
          if (!token) {
            location.href = "login.html"
          }
          // 查询用户信息
          axios.get("/user/me")
            .then()
            .catch(err => {
              this.$message.error(err);
              setTimeout(() => location.href = "login.html", 200)
            })
        },
        goBack() {
          history.back();
        },
        handleRemove(file) {
          console.log(file);
        },
        onScroll(e) {
          let scrollTop = e.target.scrollTop;
          let offsetHeight = e.target.offsetHeight;
          let scrollHeight = e.target.scrollHeight;
          if (scrollTop + offsetHeight + 1 > scrollHeight && !this.isReachBottom) {
            this.isReachBottom = true
            console.log("触底")
            this.current++
            this.queryShops();
          } else {
            this.isReachBottom = false
          }
        },
      },

    })
  </script>
</body>

</html>